<template>
  <div class="user-manager">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="状态" prop="state">
          <el-select v-model="queryForm.applyState" placeholder="状态">
            <el-option value=" " label="全部"></el-option>
            <el-option :value="1" label="待审批"></el-option>
            <el-option :value="2" label="审批中"></el-option>
            <el-option :value="3" label="审批拒绝"></el-option>
            <el-option :value="4" label="审批通过"></el-option>
            <el-option :value="5" label="作废"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getApplyList">查询</el-button>
          <el-button type="" @click="handleReset('')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <el-table
          :data="applyList"
          style="width: 100%"
      >
        <!--        <el-table-column type="selection"/>-->
        <el-table-column
            v-for="item in columnList"
            :key="item.prop"
            :formatter="item.formatter"
            :label="item.label"
            :prop="item.prop"
        />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <!--      这条单子审批人是当前登录的用户，并且单子状态为审核中或者待审批才显示按钮      -->
            <el-button
                size="mini"
                @click="handleDetail(scope.row)"
                v-if="scope.row.curAuditUserName == userInfo.userName && [1,2].includes(scope.row.applyState) "
            >审核
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-size="pager.pageSize"
          :total="pager.total"
          background
          class="pagination"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 查看详情弹框 -->
    <!--  destroy-on-close 疑似缓存的东西  -->
    <el-dialog
        title="申请休假详情"
        v-model="showDetailModal"
        width="50%"
        :before-close="handleClose"
        destroy-on-close>
      <el-form ref="dialogForm" :model="auditForm" label-width="120px" label-suffix=":" :rules="rules">
        <el-form-item label="申请人">
          <div>{{ detail.applyUser.userName }}</div>
        </el-form-item>
        <el-form-item label="休假类型">
          <div>{{ detail.applyTypeName }}</div>
        </el-form-item>
        <el-form-item label="休假时间">
          <div>{{ detail.time }}</div>
        </el-form-item>
        <el-form-item label="休假时长">
          <div>{{ detail.leaveTime }}</div>
        </el-form-item>
        <el-form-item label="休假原因">
          <div>{{ detail.reasons }}</div>
        </el-form-item>
        <el-form-item label="审批人">
          <div>{{ detail.curAuditUserName }}</div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="auditForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="handleApprove('pass')">审核通过</el-button>
            <el-button type="danger" @click="handleApprove('refuse')">驳回</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {getCurrentInstance, nextTick, onMounted, reactive, ref, toRaw} from "vue";
import utils from "../utils/utils";
import {useStore} from "vuex"

const store = useStore()
// 当前登录的用户
const userInfo = store.state.userInfo

const {proxy} = getCurrentInstance();
//搜索表单
const queryForm = reactive({
  applyState: 1,
});
//分页数据
const pager = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

// 审批表单
const auditForm = reactive({
  remark: ''
})

//table列头数据
const columnList = ref([
  {
    label: "单号",
    prop: "orderNo",
  },
  {
    label: "申请人",
    prop: "",
    formatter(row) {
      return row.applyUser.userName;
    }
  },
  {
    label: "休假事件",
    prop: "",
    formatter(row) {
      return utils.formatDate(new Date(row.startTime), 'yyyy-MM-dd') + '到' + utils.formatDate(new Date(row.endTime), 'yyyy-MM-dd')
    }
  },
  {
    label: "休假时长",
    prop: "leaveTime",
  },
  {
    label: "休假类型",
    prop: "applyType", // 1：事假，2：调休，3：年假
    formatter(row, column, value) {
      return {1: "事假", 2: "调休", 3: "年假"}[value];
    },
  },
  {
    label: "休假原因",
    prop: "reasons",
  },
  {
    label: "申请时间",
    prop: "createTime",
    formatter(row, column, value) {
      return utils.formatDate(new Date(value));
    },
  },
  {
    label: "审批人",
    prop: "auditUsers",
  },
  {
    label: "当前审批人", //多个
    prop: "curAuditUserName",
  },
  {
    label: "审批状态",
    prop: "applyState",
    formatter(row, column, value) {
      // 1：待审批，2：审批中，3：审批拒绝，4：审批通过，5：作废
      return {1: "待审批", 2: "审批中", 3: "审批拒绝", 4: "审批通过", 5: "作废"}[value];
    },
  },
]);

//获取form ref
const form = ref(null);

// 休假详情
const showDetailModal = ref(false)

//重置表单
const handleReset = (form) => {
  // proxy.$refs[form].resetFields();
  if (form) {
    return proxy.$refs[form].resetFields();
  }
  queryForm.applyState = null
  getApplyList();
};

const rules = {
  remark: [
    {
      required: true,
      message: "请输入审核备注",
      trigger: "change"
    }
  ]
}

// 关闭弹窗
const handleClose = () => {
  showDetailModal.value = false
  handleReset('dialogForm')
}

//页码切换调用方法
const handleCurrentChange = (current) => {
  pager.pageNum = current;
};

// 休假申请列表
const applyList = ref([])

// 休假申请查询
const getApplyList = async () => {
  const params = {...queryForm, ...pager, type: 'approve'}
  const {list, page} = await proxy.$api.getApplyList(params)
  applyList.value = list
  pager.total = page.total
}

// 显示审核详情
const handleDetail = (row) => {
  let data = {...row};
  // "applyType":1,//申请类型  1:事假 2：调休 3:年假
  data.applyTypeName = {
    1: "事假",
    2: "调休",
    3: "年假",
  }[data.applyType];
  data.time =
      utils.formatDate(new Date(data.startTime), "yyyy-MM-dd") +
      "到" +
      utils.formatDate(new Date(data.endTime), "yyyy-MM-dd");
  // 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
  data.applyStateName = {
    1: "待审批",
    2: "审批中",
    3: "审批拒绝",
    4: "审批通过",
    5: "作废"
  }[data.applyState]
  detail.value = data;
  showDetailModal.value = true;
}

const detail = ref()

// 审核通过/驳回，确认按钮
const handleApprove = (action) => {
  proxy.$refs['dialogForm'].validate(async (valid) => {
    if (valid) {
      let params = {
        action,
        remark: auditForm.remark,
        _id: detail.value._id
      }
      try {
        const result = await proxy.$api.leaveApprove(params)
        handleClose()
        proxy.$message.success('处理成功')
        getApplyList()
        store.commit("saveNoticeCount", store.state.noticeCount - 1)
      } catch (e) {
        console.log(e)
      }
    }
  })
}

onMounted(() => {
  getApplyList()
})
</script>
<style lang="scss" scoped></style>
